<%@ page contentType="text/html;charset=UTF-8" language="java"  pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<html>
<head>
    <meta charset="utf-8">
    <title>文章编辑</title>
</head>

<body>
    <div class="wrap">
        <!-- 头部 -->
        <c:import url="../head.jsp"></c:import>
        <!-- 左侧菜单和主体内容 -->
        <div class="grid-1-7" style="flex: 1;margin:0;">
            <!-- 左侧菜单 -->
            <c:import url="../menu.jsp"></c:import>
            <!-- 面包屑导航和主体内容 -->
            <div class="content">
                <!--面包屑导航-->
                <div class="content-header">
                    <div class="breadcrumb">
                        <span>文章管理</span>
                        <span class="divider">/</span>
                        <span class="active">文章编辑</span>
                    </div>
                </div>
                <!--全部主体内容-->
                <div class="list-content">
                    <!--块元素-->
                    <div class="block">
                        <div class="banner">
                            <p class="tab fixed">文章编辑<span class="hint">Editors</span></p>
                        </div>
                        <!--正文-->
                        <div class="main">
                            <!--表单-->
                            <form id="form">
                                <%--隐藏域--%>
                                <input type="hidden" id="id" name="id" value="${article.id}"/>
                                <!--输入框-->
                                <div class="unit">
                                    <div class="left">
                                        <p class="subtitle">用户名</p>
                                    </div>
                                    <div class="right">
                                        <input type="text" class="text" name="title" data-type="必填" error-msg="请输入文章标题" value="${article.title}" />
                                    </div>
                                    <!--清浮动-->
                                    <span class="clearfix"></span>
                                </div>
                                <!--分割线-->
                                <p class="divider"></p>

                                <!--下拉选择框-->
                                <div class="unit">
                                    <div class="left">
                                        <p class="subtitle">文章分类</p>
                                    </div>
                                    <div class="right">
                                        <select  id="type_id" name="typeId">
                                            <%--遍历--%>
                                            <c:forEach items="${typeList}" var="typeInfo" varStatus="status" >
                                                <%--<option value="${typeInfo.id}">${typeInfo.name}</option> --%>
                                                <c:choose>
                                                    <c:when test="${article.typeId==typeInfo.id}">
                                                        <option value="${typeInfo.id}" selected>${typeInfo.name}</option>
                                                    </c:when>
                                                    <c:otherwise>
                                                        <option value="${typeInfo.id}">${typeInfo.name}</option>
                                                    </c:otherwise>
                                                </c:choose>
                                            </c:forEach>
                                            <%--<c:forEach items="${typeList}" var="typeInfo" varStatus="status">
                                                <option value="${typeInfo.id}"
                                                        <c:if test="${article.typeId==typeId}"></c:if>selected>${typeInfo.name}</option>
                                            </c:forEach>--%>
                                        </select>
                                    </div>
                                    <!--清浮动-->
                                    <span class="clearfix"></span>
                                </div>
                                <!--文章封面-->
                                <div class="unit">
                                    <div class="left">
                                        <p class="subtitle">文章封面</p>
                                    </div>
                                    <div class="right">
                                        <!--上传按钮-->
                                        <a href="javascript:;">
                                            <label id="container" for="upload" style="display: inline-block;width: 132px;height: 74px;">

                                                <%--判断有没有图片，没有采用默认图片--%>
                                                    <c:choose>
                                                        <c:when test="${empty article.cover}">
                                                           <%--空--%>
                                                            <img src="${pageContext.request.contextPath}/static/javaex/pc/images/default.png" width="100%" height="100%" >
                                                        </c:when>
                                                        <c:otherwise>
                                                            <%--非空--%>
                                                            <img src="/upload/${article.cover}" width="100%" height="100%" >
                                                        </c:otherwise>
                                                    </c:choose>
                                                <img src="${pageContext.request.contextPath}/static/javaex/pc/images/default.png" width="100%" height="100%" >
                                            </label>
                                            <input type="file" class="hide" id="upload" accept="image/gif, image/jpeg, image/jpg, image/png" />
                                        </a>
                                        <input type="hidden" id="cover" name="cover" value="${typeInfo.cover}"/>
                                    </div>
                                    <!--清浮动-->
                                    <span class="clearfix"></span>
                                </div>
                                <!--文本域-->
                                <div class="unit">
                                    <div class="left">
                                        <p class="subtitle">内容</p>
                                    </div>
                                    <div class="right">
                                        <div id="edit" class="edit-container">
                                        <input type="hidden" id="content" name="content" value=""/>
                                        <input type="hidden" id="contentText" name="contentText" value="${article.contentText}"/>
                                        </div>
                                    </div>
                                    <!--清浮动-->
                                    <span class="clearfix"></span>
                                </div>


                                <!--提交按钮-->
                                <div class="unit">
                                    <div style="margin-left: 200px;">
                                        <!--表单提交时，必须是input元素，并指定type类型为button，否则ajax提交时，会返回error回调函数-->
                                        <input type="button" id="return" class="button no" value="返回" />
                                        <input type="button" id="submit" class="button yes" value="保存" />
                                    </div>
                                    <!--清浮动-->
                                    <span class="clearfix"></span>
                                </div>
                            </form>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>
</body>


<script>

    //默认文本
    var content = '${article.content}';
    //图片
    javaex.upload({
        type : "image",
        url : "upload.json",	// 请求路径
        id : "upload",			// <input type="file" />的id
        param : "file",			// 参数名称，SSM中与MultipartFile的参数名保持一致
        dataType : "url",		// 返回的数据类型：base64 或 url
        callback : function (rtn) {
            // 后台返回的数据
            console.log(rtn);
			if (rtn.code=="000000") {
			    var imgUrl = rtn.data.imgUrl;
				$("#container img").attr("src", "/upload/"+rtn.data.imgUrl);
				$("#cover").val(imgUrl);
			} else {
				javaex.optTip({
					content : rtn.message,
					type : "error"
				});
			}
        }
    });

    //下拉选
    javaex.select({
        id : "select",
        isSearch:false
    });
    //文本域
    javaex.edit({
        id : "edit",
        image : {
            url : "upload.json",	// 请求路径
            param : "file",		// 参数名称，SSM中与MultipartFile的参数名保持一致
            dataType : "url",	// 返回的数据类型：base64 或 url
            rtn : "rtnData",	// 后台返回的数据对象，在前面页面用该名字存储
            imgUrl : "data.imgUrl",	// 根据返回的数据对象，获取图片地址。  例如后台返回的数据为：{code: "000000", message: "操作成功！", data: {imgUrl: "1.jpg"}}
            prefix : "/upload/"	// 图片地址的前缀，根据实际情况决定是否需要填写
        },
        content : '${article.content}',	// 这里必须是单引号，因为html代码中都是双引号，会产生冲突
        callback : function(rtn) {
            $("#content").val(rtn.html);
            /*截取文本的前一百个字符*/
            $("#contentText").val(rtn.text.substring(0,100));
            //console.log(rtn.text.substring(0,10));
        }
    });

    /*返回按钮*/
    $("#return").click(function () {
        history.back();

    });
    /*提交按钮*/
    $("#submit").click(function () {
        $.ajax({
            url : "save.json",
            type : "POST",
            dataType : "json",
            data : $("#form").serialize(),//序列化提交，也就是form表单的name属性都提交

            success : function(rtn) {
                //console.log(rtn);
                if (rtn.code == "000000") {
                    javaex.optTip({
                        content:rtn.message,

                    });
                    //延迟加载
                    setTimeout(function () {
                        //跳转页面
                        window.location.href = "${pageContext.request.contextPath}/article/list.action";
                    },2000);
                }else {
                    javaex.optTip({
                        content:rtn.message,
                        type:"error"
                    },2000);

                }
            }
        });

    });
</script>
</html>